<template>
  <div>
    <common-head title="购物车" />
    <div class="wrap">
      <div class="items">
        <van-swipe-cell v-for="item in items" :key="item.id">
          <div class="item">
            <van-checkbox @change="itemSelectedChange(item.key, item.selected)" v-model="item.selected" />
            <!-- 商品卡片 -->
            <van-card
              :num="item.number"
              :price="item.price"
              :title="item.name"
              :thumb="item.pic"
            >
              <template #footer>
                <van-button
                  @click="delItem(item.key)"
                  style="margin-bottom:10px" type="danger" size="mini">删除</van-button>
                <van-stepper @change="itemNumChange(item.key, item.number)" v-model="item.number" />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              @click="delItem(item.key)"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- tabbar -->
    <mtabbar />
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import CommonHead from '_components/CommonHead'
import Mtabbar from '_components/Mtabbar'
import { fetchCartInfo, addItemNumber, delCartItem, setItemSelected } from '_api'
import { getToken } from '_utils'
import { Dialog } from 'vant'
export default {
  name: 'cart',
  data () {
    return {
      items: [],
      total: 0
    }
  },
  created () {
    this.fetchShoppingInfo()
  },
  methods: {
    itemSelectedChange (key, selected) {
      // 修改商品选中状态
      setItemSelected({
        key,
        selected,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    delItem (key) {
      // 删除商品
      Dialog.confirm({
        title: '删除商品',
        message: '您确认要删除吗'
      })
        .then(() => {
          // 点击确认按钮
          delCartItem({
            key,
            token: getToken()
          }).then(res => {
            if (res.data.code === 0) {
              this.items = res.data.data.items
              this.total = res.data.data.price
              this.$store.commit('cart/set_items', this.items)
            }
            if (res.data.code === 700) {
              // 购物车空了
              this.items = []
              this.total = 0
              this.$store.commit('cart/set_items', this.items)
            }
          })
        })
    },
    itemNumChange (key, number) {
      // 点击修改 购买数量
      addItemNumber({
        key,
        number,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    onSubmit () {
      // 判断购物车中是否为空 不允许进入订单
      // 拿到所有选中商品
      const checkedItems = this.items.filter(item => item.selected)
      if (this.items.length === 0 || checkedItems.length === 0) {
        Dialog.alert({
          title: '购物车为空',
          message: '当前没有选中商品,请前往选购'
        }).then(() => {
          this.$router.push('/home')
        })
        return false
      }
      // 到订单页
      this.$router.push('/order')
    },
    fetchShoppingInfo () {
      // 请求购物车商品
      fetchCartInfo({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    }
  },
  computed: {
    allChecked: {
      get () {
        /*
          所有商品选中状态都为true结果就为true
          否则 为false
        */
        return this.items.every(item => item.selected)
      },
      set (val) {
        // 点击全选修改 所有单选状态
        // 拿到所有商品的key属性 扔到数组中
        const keys = []
        this.items.forEach(item => { keys.push(item.key) })
        console.log(keys)
        setItemSelected({
          key: keys.join(','),
          selected: val,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.items = res.data.data.items
            this.total = res.data.data.price
          }
        })
      }
    }
  },
  components: {
    Mtabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-bottom: 100px;
   .delete-button {
    height: 100%;
  }
  .item{
    display: flex;
    background-color: #fafafa;
    .van-checkbox{
      padding:0 10px;
    }
    .van-card{
      flex: 1;
    }
  }
}
/deep/ .van-submit-bar{
  bottom: 50px;
}
</style>
